<template>
  <view class="detail-container">
    <!-- 商品图片 -->
    <image class="product-image" :src="productInfo.image" mode="aspectFill"></image>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">{{ productInfo.name }}</text>
      <view class="product-desc">{{ productInfo.description }}</view>
    </view>

  
    <!-- 底部按钮 -->
    <view class="bottom-button" @click="handlePurchase">
      <text class="btn-text">资讯采购</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 模拟商品数据
const productInfo = ref({
  image: '/static/org/org-success.png',
  name: '商品名称',
  description: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
})

// 点击采购
const handlePurchase = () => {
  uni.showToast({
    title: '采购咨询',
    icon: 'none'
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const id = currentPage.options.id
  console.log('id==='+ id)
})
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background: #FFFFFF;
  padding-top: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: calc(82rpx + env(safe-area-inset-bottom));
}

// 商品主图
.product-image {
  width: 100%;
  height: 382rpx;
}

// 商品信息
.product-info {
  background: #FFFFFF;
  padding: 40rpx 16rpx;
}

.product-name {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.product-desc {
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
}


// 底部按钮
.bottom-button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  padding-bottom: env(safe-area-inset-bottom);
}

.btn-text {
  width: 100%;
  height: 82rpx;
  background: #FAC653;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style>